<template>
    <div class="right-box col-sm-4">
        <right :title="rightTitle" :items="views"/>
        <right :title="recommendTitle" :items="recommends"/>
        <div v-if="links.name" class="links">
            <h2 class="home-title">{{ links.name }}</h2>
            <ul>
                <li v-for="(item, key) in links.nav_info" :key="key">
                    <a :href="item.url" :target="item.target">
                        {{ item.name }}
                    </a>
                </li>
            </ul>
        </div>
        <we-chat class="background"/>
    </div>
</template>

<script>
    import Right from '../article/Right'
    import WeChat from './WeChat'
    import {mapState, mapActions} from 'vuex'

    export default {
        name: "RightArticle",
        components: {
            Right,
            WeChat
        },
        props: {
            link: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                rightTitle: "浏览排行",
                recommendTitle: "站长推荐",
            }
        },
        methods: {
            ...mapActions(["articles"])
        },
        created() {
            // 浏览排行
            if (this.views.length <= 0) {
                this.articles({
                    orderBy: "view_num desc,sort asc,id desc",
                    limit: 3,
                    key: "view",
                });
            }

            // 站长推荐
            if (this.recommends.length <= 0) {
                this.articles({
                    limit: 3,
                    recommend: 1,
                    key: "recommend",
                });
            }

            // 友情链接
            if (this.link && this.links.length <= 0) {
                this.$store.dispatch("links");
            }
        },
        computed: mapState(['views', 'recommends', 'links'])
    }
</script>

<style lang="scss">
    .links {
        width: 100%;
        background: #FFF;
        overflow: hidden;
        ul {
            padding: 20px 50px;
            li {
                line-height: 24px;
                border: 1px solid #ccc;
                margin: 0 0 10px 0;
                padding: 5px;
                text-align: center;
                border-radius: 5px;
                &:hover a {
                    color: #096
                }
            }
        }
    }
</style>